<template>
	<view class="root">
		<!-- tab-->
		<view class="header-box" :style="{ background: headerInfo.headerBackground }">
			<view class="header">
				<view class="app-info-box">
					<image
						v-if="headerInfo && headerInfo.isShow && headerInfo.logo && headerInfo.logo.url"
						class="logo"
						:src="headerInfo.logo.url"
					></image>
					<view class="title" :style="{ color: headerInfo.nameColor }">{{ headerInfo.name }}</view>
				</view>
				<view class="tabs">
					<!-- :class="{'active':activeIndex == tabIndex}" -->
					<view
						v-for="(tabItem, tabIndex) in headerInfo.tabbar"
						:key="tabIndex"
						@click="scrollTo(tabIndex)"
						class="tabs-item"
						:style="{ color: headerInfo.tabColor }"
					>
						{{ tabItem }}
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<scroll-view class="content" scroll-y="true" :scroll-into-view="currentId">
			<view id="row0">
				<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000">
					<swiper-item
						v-for="(posterItem, posterIndex) in posterData"
						@click="toUrl(posterItem)"
						:key="posterIndex"
						:style="{ background: posterItem.bannerBackground }"
						style="width: 100vw"
					>
						<view class="pos-box">
							<view class="pos-column">
								<text class="pos-title" :style="{ color: posterItem.titleColor }">{{ posterItem.title }}</text>
								<text class="pos-tip" :style="{ color: posterItem.subTitleColor }">{{ posterItem.subTitle }}</text>
							</view>

							<template v-if="posterItem && posterItem.bannerfile && posterItem.bannerfile.url">
								<image v-if="showMob" class="pos-img" mode="aspectFit" :src="posterItem.bannerfile.url"></image>
								<image
									v-else
									style="width: 500px; height: 500px"
									mode="aspectFit"
									:src="posterItem.bannerfile.url"
								></image>
								<!-- 
								style="width: 500px;height:500px;border: red solid 1px;"
								<image v-else :style="{'width':posterWidth + 'px','height':posterHeight + 'px'}"
									@load="loadImg" mode="aspectFit" :src="posterItem.bannerfile.url"></image> -->
							</template>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 下载 -->
			<view id="row1" v-if="downloadInfo.length">
				<view class="main-title" :style="{ color: headerInfo.titleColor }">{{ headerInfo.tabbar[1] }}</view>
				<!-- <view class="download-title" :style="{'color':titleColor}">根据你的手机，选择下载</view> -->
				<view class="pro-box">
					<view v-for="(item, index) in downloadInfo" :key="index" @click="toUrl(item)" class="app-download">
						<image
							v-if="item.bannerfile && item.bannerfile.url"
							class="app-download-img"
							:src="item.bannerfile.url"
						></image>
						<view class="app-download-type">{{ downloadType(item.type) }}</view>
					</view>
				</view>
			</view>
			<!-- app介绍 -->
			<view id="row2">
				<view class="main-title" :style="{ color: headerInfo.titleColor }">{{ headerInfo.tabbar[2] }}</view>
				<text class="mob-size">{{ appIntroduce.slogan }}</text>
				<view class="app-info">
					<li v-for="(info, k) in appIntroduce.content" :key="k" class="app-text">{{ info }}</li>
				</view>
				<image
					v-if="appIntroduce.showImg && appIntroduce.showImg.url"
					class="pro-img"
					:src="appIntroduce.showImg.url"
					mode="widthFix"
				></image>
			</view>
			<!-- 公司介绍 -->
			<view id="row3">
				<text class="main-title" :style="{ color: headerInfo.titleColor }">{{ headerInfo.tabbar[3] }}</text>
				<text class="mob-size">{{ comIntroduce.slogan }}</text>
				<view class="adv-box">
					<view v-for="(comItem, comIndex) in comIntroduce.content" :key="comIndex" class="adv-item">
						<image v-if="comItem.iconImg && comItem.iconImg.url" class="adv-icon" :src="comItem.iconImg.url"></image>
						<view class="adv-title-box">
							<view class="adv-title">{{ comItem.title }}</view>
							<view class="adv-detail">{{ comItem.subTitle }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 关于我们 -->
			<view id="row4">
				<view class="main-title" :style="{ color: headerInfo.titleColor }">{{ headerInfo.tabbar[4] }}</view>
				<view class="foot-title-box">
					<view class="foot-column" style="margin-right: 5%">
						<text v-if="aboutus.mobile" class="text-p" :style="{ color: aboutus.footColor }">
							联系电话：{{ aboutus.mobile }}
						</text>
						<text v-if="aboutus.email" class="text-p" :style="{ color: aboutus.footColor }">
							联系邮箱：{{ aboutus.email }}
						</text>
					</view>
					<view class="foot-column">
						<text v-if="aboutus.QQgroup" class="text-p" :style="{ color: aboutus.footColor }">
							交流QQ群：{{ aboutus.QQgroup }}
						</text>
						<text v-if="aboutus.address" class="text-p mob-address" :style="{ color: aboutus.footColor }">
							联系地址：{{ aboutus.address }}
						</text>
					</view>
				</view>
				<view class="foot-bottom">
					<!-- 					<view class="foot-beian">
						<view
							v-if="aboutus.beianhao"
							class="beian-text"
							:style="{ color: aboutus.footColor }"
							@click="openUrl(aboutus.beianhaoUrl)"
						>
							{{ aboutus.beianhao }}
						</view>
						<view class="a-link" @click="openUrl(aboutus.beiandiUrl)">
							<image class="beian-logo" src="../../static/common/beian.png"></image>
							<view v-if="aboutus.beiandi" class="beian-text" :style="{ color: aboutus.footColor }">
								{{ aboutus.beiandi }}
							</view>
						</view>
					</view> -->
					<view class="top">
						<text v-if="aboutus.copyright" class="copy" :style="{ color: aboutus.footColor }">
							{{ aboutus.copyright }}
						</text>
						<text style="margin-left: 1em; color: #888888">ICP证：</text>
						<text style="color: #f6d44c" @click="openUrl(aboutus.beianhaoUrl)">
							{{ aboutus.beianhao }}
						</text>
					</view>
					<view class="button">
						<text @click="navigatorTo('/pages/privacy/privacy')">隐私政策</text>
						<text @click="navigatorTo('/pages/agreement/agreement')">用户服务协议</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
const getconfigObj = uniCloud.importObject("getconfig");
export default {
	data() {
		return {
			currentId: "",
			posterWidth: "180",
			posterHeight: "",
			showMob: false,
			activeIndex: 0,
			offsetTops: [],
			lock: false,
			headerInfo: {
				_id: "header",
				logo: {
					extname: "",
					name: "",
					url: ""
				},
				name: "",
				nameColor: "",
				tabbar: [],
				tabColor: "",
				headerBackground: "",
				titleColor: "",
				isShow: false
			},
			//轮播内容
			posterData: [
				{
					title: "",
					subTitle: "",
					bannerfile: {
						url: ""
					},
					open_url: "",
					titleColor: "#fdf085",
					subTitleColor: "#ffffff",
					bannerBackground: "#728af4"
				}
			],
			// 下载
			downloadInfo: [
				{
					open_url: "http://zhushou.360.cn/",
					type: 0,
					status: true,
					bannerfile: {
						url: ""
					}
				}
			],
			// 应用介绍
			appIntroduce: {
				slogan: "",
				content: [],
				showImg: {
					url: "",
					extname: "png",
					name: "shuijiao.png"
				}
			},
			//更改主体颜色
			// headerBackground: "#728af4", // 头部背景色，主色#e88a4b ----cat 主色#5874D8 -----song
			// swiperBackground: "#728af4", //轮播背景色
			// titleColor: "#728af4", //标题颜色#FF9853
			//公司简介
			comIntroduce: {
				slogan: "",
				content: [
					{
						title: "",
						subTitle: "",
						iconImg: {
							url: "",
							extname: "png"
						}
					}
				]
			},
			aboutus: {
				mobile: "",
				email: "",
				QQgroup: "",
				address: "",
				beianhao: "",
				beianhaoUrl: "",
				beiandi: "",
				beiandiUrl: "",
				copyright: "",
				footColor: ""
			}
		};
	},
	onLoad() {
		this.getBanner();
		this.getConfig();
		this.getDownload();
	},
	created() {
		// 定义变量获取屏幕视口宽度
		var windowWidth = document.documentElement.clientWidth;
		if (windowWidth < 750) {
			this.showMob = true;
		} else {
			this.showMob = false;
		}
	},
	methods: {
		loadImg(e) {
			console.log("e:----loadImg ", e);
			// 	this.posterWidth = e.detail.width
			// 	this.posterHeight = e.detail.height
		},
		getConfig() {
			getconfigObj
				.getConfig()
				.then((res) => {
					// console.log("res:-----getConfig ", res.data);
					this.headerInfo = res.data[0];
					this.appIntroduce = res.data[1];
					this.comIntroduce = res.data[2];
					this.aboutus = res.data[3];
				})
				.catch((err) => {
					console.log("err: ", err);
				});
		},
		getBanner() {
			getconfigObj
				.getBanner()
				.then((res) => {
					// console.log("res:----getBanner ", res);
					this.posterData = res.data;
				})
				.catch((err) => {
					console.error(err);
				});
		},
		getDownload() {
			getconfigObj
				.getDownload()
				.then((res) => {
					// console.log("res:----getDownload ", res);
					this.downloadInfo = res.data;
				})
				.catch((err) => {
					console.error(err);
				});
		},
		downloadType(type) {
			switch (type) {
				case 0:
					return "H5";
					break;
				case 1:
					return "Android";
					break;
				case 2:
					return "ios";
					break;
				case 3:
					return "小程序";
					break;
				default:
					break;
			}
		},
		toUrl(item) {
			if (item.open_url) {
				window.open(item.open_url);
			}
		},
		openUrl(url) {
			window.open(url);
		},
		scrollTo(index) {
			this.activeIndex = index;
			this.currentId = "row" + index;
		},
		navigatorTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style>
body {
	padding: 0;
	margin: 0;
}

view {
	display: flex;
	box-sizing: border-box;
}

.root {
	flex-direction: column;
	width: 100%;
	flex: 1;
	height: 100vh;
}

.content {
	flex-direction: column;
	justify-content: center;
	height: calc(100vh - 100px);
}

#row0,
#row1,
#row2,
#row3,
#row4 {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* 手机端 */
@media screen and (max-width: 750px) {
	.header {
		flex-direction: column;
		padding: 0 10px;
	}

	.title {
		font-size: 22px;
	}

	.app-info {
		width: 80%;
	}

	.app-text {
		width: 100%;
		font-size: 15px;
		color: #888888;
		line-height: 22px;
		margin-bottom: 20rpx;
	}

	.a-link {
		margin-right: 36px;
	}

	.copy {
		font-size: 14px;
	}

	.logo {
		width: 50px;
		height: 50px;
	}

	.tabs {
		overflow-x: scroll;
		width: 100%;
	}

	.tabs-item {
		width: 80px;
		flex-shrink: 0;
		line-height: 25px;
		margin-right: 10px;
		font-size: 14px;
	}

	.active {
		font-size: 16px;
	}

	.pos-column {
		flex-direction: column;
		width: 40%;
	}

	.pos-box {
		width: 100%;
		justify-content: space-around;
		align-items: center;
		display: flex;
		flex-direction: row;
		margin-top: 50px;
	}

	.pos-title {
		width: 100%;
		font-size: 18px;
		line-height: 30px;
	}

	.pos-img {
		width: 180px;
	}

	.pos-tip {
		font-size: 14px;
		line-height: 30px;
	}

	.main-title {
		font-size: 24px;
		margin: 40px 0;
	}

	.download-title {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.pro-box {
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.qr-download-img {
		width: 100px;
		height: 100px;
	}

	.pro-img {
		width: 90vw;
		height: 300px;
		margin-top: 30px;
	}

	.adv-box {
		flex-direction: column;
		align-items: center;
		margin: 30px 0 50px 0;
		flex-wrap: wrap;
		justify-content: center;
	}

	.adv-detail {
		width: 220px;
		font-size: 15px;
		line-height: 25px;
		color: #888888;
	}

	.text-p {
		width: 100px;
		font-size: 14px;
		line-height: 25px;
		margin-bottom: 20rpx;
	}

	.mob-address {
		width: 160px;
	}

	.adv-title {
		font-size: 20px;
		max-width: 220px;
	}

	.adv-item {
		margin: 20px 0;
	}

	.carousel {
		height: 300px;
	}

	.app-download {
		width: 150px;
		height: 185px;
		margin: 20rpx 0rpx;
	}

	.app-download-img {
		width: 120px;
		height: 120px;
		margin-bottom: 10px;
	}

	.app-download-type {
		font-size: 18px;
	}

	.mob-size {
		width: 90%;
		font-size: 16px;
	}

	.foot-column {
		flex-direction: column;
		width: 100%;
	}

	.foot-title-box {
		width: 90vw;
		justify-content: space-around;
	}

	.foot-beian {
		flex-direction: column;
	}

	.beian-text {
		line-height: 25px;
		font-size: 14px;
	}
}

/* pc端 */
@media screen and (min-width: 640px) {
	.header {
		flex-direction: row;
		padding: 0 50px;
	}

	.app-text {
		width: 100%;
		font-size: 18px;
		margin-bottom: 20rpx;
		color: #888888;
	}

	.logo {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
	}

	.tabs-item {
		width: 100px;
		justify-content: center;
		margin-right: 30px;
		font-size: 20px;
	}

	.active {
		font-size: 24px;
	}

	.pos-box {
		width: 100%;
		padding: 0 30px;
		height: 610px;
		justify-content: center;
		align-items: center;
		/* margin-top: 80px; */
	}

	.pos-title {
		font-size: 45px;
		margin-bottom: 10px;
		line-height: 60px;
	}

	.pos-column {
		flex-direction: column;
		width: 40%;
	}

	.pos-img {
		/* width: 35%; */
		/* width:300px; */
		/* border: red solid 2px; */
	}

	.pos-tip {
		font-size: 26px;
	}

	.main-title {
		font-size: 40px;
		margin: 80px 0;
	}

	.download-title {
		font-size: 25px;
		margin-bottom: 30px;
	}

	.qr-download-img {
		width: 160px;
		height: 160px;
	}

	.pro-img {
		width: 60vw;
		height: auto;
		margin-top: 30px;
	}

	.app-info {
		width: 50%;
	}

	.adv-box {
		flex-direction: row;
		align-items: center;
		margin: 50px 0;
		width: 73%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.adv-detail {
		width: 400px;
		font-size: 18px;
		line-height: 30px;
		color: #888888;
	}

	.foot-title-box {
		width: 70vw;
		flex-direction: row;
	}

	.adv-title {
		font-size: 24px;
		max-width: 350px;
	}

	.adv-title-box {
		margin-right: 30px;
	}

	.carousel {
		height: 610px;
	}

	.title {
		font-size: 30px;
	}
	.app-download {
		width: 250px;
		height: 300px;
		margin: 0vw 3vw;
	}

	.app-download-img {
		width: 180px;
		height: 180px;
		margin-bottom: 15px;
	}

	.app-download-type {
		font-size: 22px;
	}

	.mob-size {
		font-size: 20px;
		text-align: center;
		width: 80%;
	}

	.foot-column {
		flex-direction: column;
		width: 100%;
	}

	.foot-beian {
		flex-direction: row;
	}

	.beian-text {
		line-height: 40px;
	}
}

.adv-title {
	font-weight: 600;
	margin-bottom: 20px;
}

.header-box {
	z-index: 88;
	top: 0;
	left: 0;
	height: 100px;
	width: 100%;
}

.header {
	width: 100%;
	align-items: center;
	justify-content: space-around;
	background: rgb(255, 255, 255, 0.1);
}

.app-info-box {
	flex-direction: row;
	align-items: center;
	width: 100%;
}

.title {
	font-weight: 700;
}

.logo {
	border-radius: 15px;
	margin-right: 20px;
}

.tabs {
	align-items: center;
}

.tabs-item {
	justify-content: center;
	cursor: pointer;
	font-weight: 600;
}

.active {
	color: #e6e6e6;
	transition: all 0.5s;
	font-weight: 600;
}

.carousel {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	z-index: 66;
}

.pos-box {
	align-items: center;
	justify-content: center;
	display: flex;
}

.pos-tip {
	color: #ffffff;
}

.pos-title {
	font-weight: bold;
}

.main-title {
	font-weight: bold;
	justify-content: center;
}

.mob-size {
	font-weight: 600;
	color: #1a1a1a;
	line-height: 25px;
	margin-bottom: 80rpx;
}

.app-qr {
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	border: #eeeeee solid 1px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.app-download {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	border: #eeeeee solid 1px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.app-download:hover {
	cursor: pointer;
	background: #f1f1f1;
	border: #eeeeee solid 2px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.app-download-img {
	justify-content: center;
	align-items: center;
}

.app-info {
	display: flex;
	flex-direction: column;
}

.adv-item {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	margin: 50rpx 0;
}

.adv-title-box {
	flex-direction: column;
	align-items: flex-start;
}

.adv-icon {
	width: 60px;
	height: 60px;
	margin-right: 30px;
}

.foot-title-box {
	justify-content: space-between;
}

.foot-bottom {
	margin-top: 50px;
	margin-bottom: 30px;
	align-items: center;
	display: flex;
	flex-direction: column;
}

.foot-beian {
	display: flex;
	align-items: center;
}

.beian-logo {
	width: 30px;
	height: 30px;
	margin-left: 30px;
	margin-right: 10px;
}

.beian-text {
	color: #888888;
	display: inline-block;
}

.a-link {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.aboutus {
	color: #eeeeee !important;
}

.button {
  color: #f6d44c;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
</style>
